import React from 'react';
function noop() { }

const throttle = function (delay, action) {
  let last = 0;
  return function (...params) {
    const curr = +new Date();
    if (curr - last > delay) {
      action.apply(this, ...params);
      last = curr;
    }
  };
};
export default class FloatButton extends React.Component {
  static defaultProps = {
    onClick: noop,
    activeClassName: '',
    highestTop: 0,//相对于屏幕的最高可移位置
    lowestBottom: 0,//相对于屏幕的最低可移位置
    sideBlank: 20,// 边距
    buttonHeight: 70,//按钮高度
    buttonWidth: 70,//按钮宽度
    defaultBottom: 20,//初始位置（相对lowestBottom)
    offset: null,//偏差值，指event中的pageX,pageY与documentElement中的clientWidth,clientHeight的偏差，会被transform样式影响
  }
  
  constructor(props) {
    super(props);
    const {sideBlank, lowestBottom, buttonHeight, buttonWidth,defaultBottom, offset} = props;
    const hd = window.getThemeVars().hd;
    const offsetX = offset ? offset.x * hd: 0, offsetY = offset ? offset.y * hd : 0;
    this.state = {
      left: document.documentElement.clientWidth - buttonWidth * hd - sideBlank * hd + offsetX,
      top: document.documentElement.clientHeight - buttonHeight * hd - lowestBottom * hd - defaultBottom * hd + offsetY,
      active: false,
    };
  }
  
  onTouchMove(event) {
    // event.preventDefault();// 阻止其他事件
    // 如果这个元素的位置内只有一个手指的话
    event.persist();
    if (event.targetTouches.length === 1) {
      const {highestTop, lowestBottom, buttonHeight, buttonWidth, offset} = this.props;
      const hd = window.getThemeVars().hd;
      const offsetX = offset ? offset.x * hd: 0, offsetY = offset ? offset.y * hd : 0;
      const touch = event.targetTouches[0];// 把元素放在手指所在的位置
      let left = touch.pageX - (buttonWidth * hd)/2 + offsetX;
      let top = touch.pageY - (buttonHeight * hd)/2 + offsetY;
      if (left < 0) {
        left = 0;
      }
      if (top < highestTop) {
        top = highestTop;
      }
      if (left + buttonWidth * hd > document.documentElement.clientWidth + offsetX) {
        left = document.documentElement.clientWidth - (buttonWidth * hd) + offsetX;
      }
      if (top + buttonHeight * hd > document.documentElement.clientHeight - lowestBottom + offsetY) {
        top = document.documentElement.clientHeight - (buttonHeight * hd) - lowestBottom + offsetY;
      }
      this.setState({ left, top });
    }
  }
  
  onTouchEnd() {
    const hd = window.getThemeVars().hd;
    const {sideBlank, buttonWidth,offset} = this.props;
    let { left } = this.state;
    const offsetX = offset ? offset.x * hd: 0;
    if (left <= document.documentElement.clientWidth / 2) {
      left = sideBlank * hd;
    } else {
      left = document.documentElement.clientWidth - buttonWidth * hd - sideBlank * hd + offsetX;
    }
    
    this.setState({ left, active: false });
  }
  onTouchStart = () => {
    this.setState({active: true})
  }
  
  render() {
    const { style,activeClassName, className, onClick } = this.props, {active} = this.state;
    const wrapStyle = { ...style, left: this.state.left, top: this.state.top };
    return (
        <div
          className={`${className} ${active ? activeClassName : ''}`}
          style={wrapStyle}
          onTouchStart={this.onTouchStart}
          onTouchEnd={() => this.onTouchEnd()}
          onTouchMove={(e) => { throttle(200, this.onTouchMove(e)); }}
          onClick={onClick || noop}
        >
          {this.props.children}
        </div>
    );
  }
}

